<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .wrap{
            width: 400px;
            height: 400px;
            background-color: grey;
            margin: 100px;
            overflow: hidden;
            /* position: relative; */
        }
        .sub{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
            /* position: relative; */
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
            padding: 5px;
            margin: 50px;
          
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="sub">
            <div class="box"></div>
        </div>
    </div>
</body>
<script>
    //前提: 父子元素绑定相同类型的事件 

    // 页面结构
    // window -> document -> html -> body  -> wrap -> sub -> box

    // 事件的两种传播机制
    // 事件捕获(网景):  从最不特定的元素 到 最特定的元素, 从外向内
    //  window -> document -> html -> body  -> wrap -> sub -> box

    // 事件冒泡(IE):  从最确切的元素 到 最不确切的元素, 从内向外
    // box-> sub -> wrap -> body  -> html -> document -> window 

    // 主流: 事件冒泡   
    
    // 注意:  DOM一级事件   只能进行事件冒泡不能进行事件捕获


    // ele.addEventListener(eventType,callback,bool)
    // ele         绑定事件元素
    // eventType   绑定事件的类型 (click dblclick )
    // callback    回调函数,事件出发时执行的内容
    // bool        是否在捕获阶段触发事件 (true:是  false:否(默认))

    // 事件流
    // (1) 捕获阶段  从最不特定的元素 到 最特定的元素, 从外向内   => 找到了事件源 
    // window -> document -> html -> body  -> wrap -> sub -> box

    // (2) 目标阶段  目标元素(事件源) 有事件就触发  没有事件,进入冒泡阶段

    // (3) 冒泡阶段  从最确切的元素 到 最不确切的元素, 从内向外
    // box-> sub -> wrap -> body  -> html -> document -> window 



    var wrap = document.getElementsByClassName("wrap")[0];
    var sub = document.getElementsByClassName("sub")[0];
    var box = document.getElementsByClassName("box")[0];


    // 事件捕获
    window.addEventListener("click",function(){
        console.log("捕获阶段","window被点击");
    },true);
    document.addEventListener("click",function(){
        console.log("捕获阶段","document被点击");
    },true);

    document.documentElement.addEventListener("click",function(){
        console.log("捕获阶段","html被点击");
    },true);

    document.body.addEventListener("click",function(){
        console.log("捕获阶段","body被点击");
    },true);

    wrap.addEventListener("click",function(){
        console.log("捕获阶段","wrap被点击");
    },true);

    sub.addEventListener("click",function(){
        console.log("捕获阶段","sub被点击");
    },true);

    box.addEventListener("click",function(){
        console.log("捕获阶段","box被点击");
    },true);

    // 事件冒泡
    window.addEventListener("click",function(){
        console.log("冒泡阶段","window被点击");
    },false);
    document.addEventListener("click",function(){
        console.log("冒泡阶段","document被点击");
    },false);

    document.documentElement.addEventListener("click",function(){
        console.log("冒泡阶段","html被点击");
    },false);

    document.body.addEventListener("click",function(){
        console.log("冒泡阶段","body被点击");
    },false);

    wrap.addEventListener("click",function(){
        console.log("冒泡阶段","wrap被点击");
    },false);

    sub.addEventListener("click",function(){
        console.log("冒泡阶段","sub被点击");
    },false);

    box.addEventListener("click",function(){
        console.log("冒泡阶段","box被点击");
    },false);



    


   








</script>
</html>